import React, {Component,Fragment} from 'react';
import Xiaojiejie from './Xiaojiejie';
import axios from 'axios';
import './style.css'
import {CSSTransition , TransitionGroup} from 'react-transition-group'
class App extends Component{
    constructor(props){
        super(props)
        this.state = {
            inputValue : 'jspang',
            list : ['React','Vue','jQuery']
        }
        this.inputChange = this.inputChange.bind(this)
        this.addList = this.addList.bind(this)
    }

    componentWillMount(){
        console.log('组件将要挂载');
    }
    componentDidMount(){
        console.log('组件挂载完成');
        axios.post('https://web-api.juejin.im/v3/web/wbbr/bgeda/2')
        .then(res=>{console.log(res,'1');})
        .catch(error=>{console.log(error,'2');})
    }
    shouldComponentUpdate(){
        console.log('组件发生改变前执行');
        return true
    }
    componentWillUpdate(){
        console.log('组件更新前，此函数在shouldComponentUpdate之后执行');
    }
    componentDidUpdate(){
        console.log('组件更新之后执行');
    }
    
    render(){
        return(
            <Fragment>
                <div>
                    <label htmlFor='input'>增加服务</label>
                    <input 
                        id='input' 
                        className='input' 
                        value = { this.state.inputValue } 
                        onChange={ this.inputChange }
                        ref = {(input)=>{this.input=input}}
                    />
                    <button onClick = {this.addList} >增加服务</button>
                </div>
                
                <ul ref={ul=>{this.ul=ul}}>
                    <TransitionGroup>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <CSSTransition
                                    timeout={1000}
                                    classNames='boss-text'
                                    unmountOnExit
                                    appear={true}
                                    key={index+item}  
                                >
                                    <Xiaojiejie 
                                        content={item}
                                        index={index}
                                        deleteItema={this.deleteItem.bind(this)}
                                        avname = {'adas'}
                                    />
                                </CSSTransition>
                                
                            )
                        })
                    }
                    </TransitionGroup>
                    
                    
                </ul>
            </Fragment>
        )
    }
    inputChange(e){
        
        this.setState({
            // inputValue:e.target.value
            inputValue:this.input.value
        })
    }
    addList(){
        if(this.state.inputValue){
            this.setState({
                list:[...this.state.list,this.state.inputValue.trim()],
                inputValue:''
            },()=>{
                console.log(this.ul.querySelectorAll('li').length);
            })
        }
        
    }
    deleteItem(index){
        let list = this.state.list
        list.splice(index,1)
        this.setState({
            list
        })
        
    }
}

export default App